<template>
  <div class="scroll-wrapper">
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-list
        v-model="Loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell
          v-for="(item, idx) in articleList"
          :key="idx"
          :title="item.title"
          @click="prospectus(item)"
        >
          <div slot="label">
            <!-- 图片 当前文章有几张图 就用几个宫格 -->
            <van-grid :column-num="item.cover.images.length" :border="false">
              <van-grid-item v-for="(img, idx) in item.cover.images" :key="idx">
                <van-image :src="img" lazy-load />
              </van-grid-item>
            </van-grid>
            <!-- 文字说明 -->
            <div class="meta">
              <span>{{ item.aut_name }}</span>
              <span>{{ item.comm_count }}评论</span>
              <span>{{ _formatTime(item.pubdate) }}</span>
              <!-- 叉号布局 -->
              <span class="close"
              @click.stop="showPopup(item)"
              >
                <van-icon name="cross"></van-icon>
              </span>
            </div>
          </div>
        </van-cell>
      </van-list>
    </van-pull-refresh>
    <!-- 弹框 -->
    <van-popup
      v-model="showMoreAction"
      :style="{ width: '80%' }"
      get-container="body"
      @close="defaultState"
      >
        <MoreAction
        @introductDis="HdisLike"
        @feedback = "feeeContent"
        @deauthor = "deDeauthor"
        ref="feedForm"
        ></MoreAction>
    </van-popup>
  </div>
</template>

<script>
import { getArticles, dislikeArticle, reportArticle } from '@/api/articles'
import { relativeTime } from '@/utils/timeFormat'
import MoreAction from './MoreAction'
export default {
  components: {
    MoreAction
  },
  // 父传子数据
  props: {
    channelList: {
      type: Object
    }
  },
  data () {
    return {
      articleList: [], // 数据
      isLoading: false, // 下拉刷新
      Loading: false, // 上拉加载
      finished: false, // 数据加载完毕
      showMoreAction: false, // 弹出层关闭
      curArticleId: null // 暂存的id
    }
  },
  methods: {
    // 渲染页面
    loadArtice () {
      // 调用封装的接口
      getArticles(this.channelList.id, Date.now())
        .then((res) => {
          console.log(res)
          const newList = res.data.data.results
          // 将返回的新数据和老数据进行拼接
          this.articleList = [...this.articleList, ...newList] // 与新数据拼接

          if (newList.length === 0) {
            this.finished = true
          }
          // 装填完数据 将loading重置为false 为下一次上拉加载做准备
          this.Loading = false
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 上滑加载
    onLoad () {
      this.loadArtice()
      console.log('sssss')
    },
    // 下拉刷新
    onRefresh () {
      // 调用接口
      getArticles(this.channelList.id, Date.now())
        .then((res) => {
          console.log(res)
          // 获取新数据
          const newList = res.data.data.results
          this.articleList = [...newList, ...this.articleList] // 与新数据拼接、
          this.$toast.success(`成功刷新${newList.length}消息`)
          // 装填完数据 将loading重置为false 为下一次上拉加载做准备
          this.isLoading = false
        })
        .catch((err) => {
          console.log(err)
          this.$toast.fail('刷新失败')
        })
    },
    // 处理时间
    _formatTime (val) {
      return relativeTime(val)
    },
    // 点击X弹出弹框
    showPopup (val) {
      this.showMoreAction = true // 打开弹窗
      this.curArticleId = val.art_id.toString() // 取出id
      console.log(this.curArticleId)
    },
    // 子组件传来的信息
    HdisLike () {
      console.log('收到啦确定', this.curArticleId)
      // 调用封装好的接口
      dislikeArticle(this.curArticleId).then((res) => {
        // 将数组里的数据删除掉
        this.articleList.forEach((value, index, array) => {
          // 如果循环出来的id与点击传出来的id一样则删除
          if (this.curArticleId === value.art_id.toString()) {
            // 删除不感兴趣的
            this.articleList.splice(index, 1)
          }
        })
        console.log(res)
        this.$toast.success('操作成功')
        this.showMoreAction = false // 关闭弹窗
      }).catch((err) => {
        console.log(err)
        this.$toast.fail('操作失败')
        this.showMoreAction = false // 关闭弹窗
      })
    },
    // 反馈垃圾问题
    feeeContent (type) {
      console.log('点击了反馈垃圾问题', type)
      // 调用封装的接口
      reportArticle(this.curArticleId, type).then((res) => {
        this.articleList.forEach((value, index, array) => {
          if (this.curArticleId === value.art_id.toString()) {
            this.articleList.splice(index, 1)
          }
        })
        this.showMoreAction = false // 关闭弹窗
        this.$toast.success('反馈成功')
        console.log(res)
      }).catch((err) => {
        console.log(err)
        this.showMoreAction = false // 关闭弹窗
        this.$toast.fail('反馈失败')
      })
    },
    // 反馈结束后下次点击弹框恢复原先状态
    defaultState () {
      console.log(this.$refs.feedForm) // 拿到所以信息找到切换的状态
      this.$refs.feedForm.isReport = false
    },
    // 拉黑作者
    deDeauthor () {
      // 调用封装好的接口
      dislikeArticle(this.curArticleId).then((res) => {
        this.articleList.forEach((value, index, array) => {
          if (this.curArticleId === value.art_id.toString()) {
            this.articleList.splice(index, 1)
          }
        })
        this.showMoreAction = false // 关闭弹窗
        this.$toast.success('拉黑成功')
        console.log(res)
      }).catch((err) => {
        console.log(err)
        this.$toast.fail('拉黑失败')
        this.showMoreAction = false // 关闭弹窗
      })
    },
    // 点击内容查看详情
    prospectus (item) {
      // 跳转到内容详情里
      console.log(item)
      this.$router.push({
        path: '/detail',
        query: {
          id: item.art_id
        }
      })
    }
  }
}
</script>

<style scoped lang='less'>
.meta {
  display: flex;
  span {
    margin-right: 10px;
  }
  .close {
    // 让它在最右边
    // 它的父级容器是flex的，给当前元素设置左外边距为auto，会让这个元素在父级容器
    // 的最右边
    margin-left: auto;
  }
}
</style>
